<script setup lang="ts">
import { ref } from 'vue';
import { $t } from '@/locales';
import { fetchReportSummary } from '@/service/api';
import HeaderSelect from './modules/header-select.vue';
import CardData from './modules/card-data.vue';
import BarChartComponent from './modules/bar-chart-component.vue';
// import CreativityBanner from './modules/creativity-banner.vue';
// 初始化数据
const apiData = ref();
const tenantData = ref();
const tenantTableData = ref();
const taskData = ref();
const taskTableData = ref();
const nodeData = ref();
const nodeTableData = ref();

async function handleChange(dateString: [string, string]) {
  window.$message?.loading({ content: `${$t('common.update')}...`, key: 'handleDateChange' });
  // 模拟根据日期范围获取新数据
  const { data: summaryData } = await fetchReportSummary(dateString);
  if (summaryData) {
    apiData.value = summaryData;
    window.$message?.success({ content: $t('common.updateSuccess'), key: 'handleDateChange' });
    // 调用格式化函数更新图表数据
    formatChartData(apiData.value);
  } else {
    window.$message?.destroy('handleDateChange');
  }
}

// 格式化图表数据的函数
function formatChartData(data: any) {
  if (!data) return;

  // 格式化tenant数据为图表所需格式
  tenantTableData.value = data.tenant.map((item: any) => ({
    ...item,
    successRate: Number(item.successRate) || 0,
    consume: Number(item.consume) || 0
  }));
  tenantData.value = {
    xAxisData: data.tenant.map((item: { key: any }) => item.key),
    seriesData: [
      {
        name: '耗时',
        data: data.tenant.map((item: { consume: any }) => item.consume)
      },
      {
        name: '成功率',
        data: data.tenant.map((item: { successRate: number }) => item.successRate * 100)
      },
      {
        name: '任务数量',
        data: data.tenant.map((item: { taskAmount: any }) => item.taskAmount)
      }
    ]
  };

  // 格式化task数据为图表所需格式
  taskTableData.value = data.task.map((item: any) => ({
    ...item,
    successRate: Number(item.successRate) || 0,
    consume: Number(item.consume) || 0
  }));
  taskData.value = {
    xAxisData: data.task.map((item: { key: any }) => item.key),
    seriesData: [
      {
        name: '耗时',
        data: data.task.map((item: { consume: any }) => item.consume)
      },
      {
        name: '成功率',
        data: data.task.map((item: { successRate: number }) => item.successRate * 100)
      }
    ]
  };

  // 格式化node数据为图表所需格式
  nodeTableData.value = data.node.map((item: any) => ({
    ...item,
    successRate: Number(item.successRate) || 0,
    consume: Number(item.consume) || 0
  }));
  nodeData.value = {
    xAxisData: data.node.map((item: { key: any }) => item.key),
    seriesData: [
      {
        name: '耗时',
        data: data.node.map((item: { consume: any }) => item.consume)
      },
      {
        name: '成功率',
        data: data.node.map((item: { successRate: number }) => item.successRate * 100)
      },
      {
        name: '任务数量',
        data: data.node.map((item: { taskAmount: any }) => item.taskAmount)
      }
    ]
  };
}

// 生成模拟数据的方法（模拟接口返回）
// async function mockData() {
//   await new Promise(resolve => {
//     setTimeout(resolve, 500);
//   });
//   return {
//     total: {
//       tasksNum: 10,
//       nodesNum: 2,
//       consumeAve: 1000,
//       successRate: 0.99
//     },
//     tenant: [
//       {
//         key: 'TenantA',
//         taskAmount: 2,
//         consume: 1000,
//         successRate: 0.98
//       },
//       {
//         key: 'TenantB',
//         taskAmount: 3,
//         consume: 1500,
//         successRate: 0.97
//       },
//       {
//         key: 'TenantC',
//         taskAmount: 5,
//         consume: 2000,
//         successRate: 0.99
//       }
//     ],
//     task: [
//       {
//         key: 'TaskA',
//         consume: 900,
//         successRate: 0.98
//       },
//       {
//         key: 'TaskB',
//         consume: 1200,
//         successRate: 0.99
//       },
//       {
//         key: 'TaskC',
//         consume: 1500,
//         successRate: 0.97
//       }
//     ],
//     node: [
//       {
//         key: 'NodeA',
//         taskAmount: 8,
//         consume: 1100,
//         successRate: 0.98
//       },
//       {
//         key: 'NodeB',
//         taskAmount: 2,
//         consume: 900,
//         successRate: 1.0
//       }
//     ]
//   };
// }

// onMounted(async () => {
//   // 模拟从接口获取数据
//   apiData.value = await mockData();

//   // 调用格式化函数处理数据
//   formatChartData(apiData.value);
// });
</script>

<template>
  <div class="mb-3">
    <ASpace direction="vertical" :size="13" style="width: 100%">
      <HeaderSelect @change="handleChange" />
      <CardData :total-data="apiData?.total" />
      <ARow :gutter="[13, 13]">
        <ACol :span="12" :lg="12">
          <BarChartComponent :table-data="tenantTableData" :data="tenantData" title="租户数据" />
        </ACol>
        <ACol :span="12" :lg="12">
          <BarChartComponent :table-data="nodeTableData" :data="nodeData" title="节点数据" />
        </ACol>
        <ACol :span="24" :lg="24">
          <BarChartComponent :table-data="taskTableData" :data="taskData" title="任务数据" />
        </ACol>

        <!--
 <ACol :span="12" :lg="12">
          <CreativityBanner />
        </ACol> 
-->
      </ARow>
      <!--
 <ARow :gutter="[24, 24]">
        <ACol :span="24" :lg="14">
          <ProjectNews />
        </ACol>
        <ACol :span="24" :lg="10">
          <CreativityBanner />
        </ACol>
      </ARow>
-->
    </ASpace>
  </div>
</template>

<style scoped></style>
